<script setup>
import { useRouter } from '@/router/index.js';
const props = defineProps({
  type: { type: String, default: () => 'TG' },
  data: { type: Array, default: () => ([]) },
});
const router = useRouter();
const isQiankun = window.__POWERED_BY_QIANKUN__;
const open = ref(false);
const showDetail = ref(false);
const ECAlarmTextDisplay = type => {
  switch (type) {
    case '基准':
      return { energyBasis: '能耗基准', energyExceeding: '超出基准' };
    case '引导':
      return { energyBasis: '引导值', energyExceeding: '超出引导值' };
    case '上限':
      return { energyBasis: '约束值', energyExceeding: '超出约束值' };
  }
};
const handleClick = () => (open.value = !open.value);
const handleClose = () => (open.value = false);
const handleDetail = item => {
  if (isQiankun) {
    router.push({
      path: '/zhny/em/alarmCalendar',
      query: { alarmType: item.alarmType, buildingCode: item.institutionCode },
    });
  }
};
const handleEnter = () => {
  showDetail.value = true;
};
const handleLeave = () => {
  showDetail.value = false;
};
defineExpose({ open });
</script>

<template>
  <div class="FloatMsg-wrapper">
    <div :style="{ display: open ? 'none' : 'flex' }" class="FloatMsg-close u-df-ct" @click="handleClick">
      <i :class="open ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
    </div>
    <div :style="{ display: open ? 'block' : 'none' }" class="FloatMsg-open u-p20">
      <div class="u-df-spb u-title20 u-w100">
        <div class="u-df-st u-prim-text u-fs14">
          <img class="FloatMsg-alarm" src="@/assets/images/alarm.png" alt="" />
          实时告警
        </div>
        <!-- <i class="el-icon-close u-fs20 cursor" @click="handleClose"></i> -->
      </div>
      <el-carousel v-if="data?.length > 0" height="140px" indicator-position="none" direction="vertical" class="u-w100">
        <el-carousel-item v-for="item in data" :key="item.alarmCode">
          <div @mouseenter="handleEnter" @mouseleave="handleLeave">
            <div
              v-show="!showDetail"
              :class="item.alarmType !== '能耗告警' ? 'u-bg-blue' : null"
              class="FloatMsg-msg u-df-ct u-fs14 cursor"
            >
              {{ item.startTimeStr }} {{ item.buildingName }}{{ item.alarmType }}
            </div>
            <div
              v-if="item.alarmType === '能耗告警' && showDetail"
              class="ECAlarm-wrapper u-mt10 u-p20 cursor"
              @click="handleDetail(item)"
            >
              <div class="u-df-st u-fs14">
                <span class="u-mr20 u-fs12">{{ item.dataDate }}</span>
                <span class="u-fw-b">{{ item.enterpriseName }}用{{ item.energyType }}{{ item.alarmType }}提醒</span>
              </div>
              <ul class="u-df-st u-mt10">
                <li>
                  <div :title="item?.energyBasis">{{ item?.energyBasis }}</div>
                  <div>{{ ECAlarmTextDisplay(item.checkType)?.energyBasis ?? '-' }}</div>
                </li>
                <li>
                  <div :title="item.energyValue">{{ item.energyValue }}</div>
                  <div>实际能耗</div>
                </li>
                <li>
                  <div :title="item?.energyExceeding">{{ item?.energyExceeding }}</div>
                  <div>{{ ECAlarmTextDisplay(item.checkType)?.energyExceeding ?? '-' }}</div>
                </li>
              </ul>
            </div>
            <div
              v-if="item.alarmType === '设备告警' && showDetail"
              class="equAlarm-wrapper u-mt10 u-p20 cursor"
              @click="handleDetail(item)"
            >
              <div class="u-df-st u-fs14">
                <span class="u-mr20 u-fs12">{{ item.dataDate }}</span>
                <span class="u-fw-b">{{ item.enterpriseName }}{{ item.alarmType }}提醒</span>
              </div>
              <ul class="u-df-st u-mt10">
                <li>
                  <div :title="item.equName">{{ item.equName }}</div>
                  <div>设备名称</div>
                </li>
                <li>
                  <div :title="item.alarmReason">{{ item.alarmReason }}</div>
                  <div>告警原因</div>
                </li>
              </ul>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div v-else class="u-df-ct u-fs14 u-sec-text" style="height: 140px">暂无告警</div>
      <i
        class="FloatMsg-collapse cursor"
        :class="open ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
        @click="handleClose"
      ></i>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.FloatMsg-wrapper {
  position: relative;
}
.FloatMsg-close {
  position: fixed;
  right: 0;
  bottom: 100px;
  width: 20px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.6);
  color: #606266;
  font-size: 20px;
  border-radius: 4px;
  cursor: pointer;
}
.FloatMsg-open {
  width: 410px;
  height: 200px;
  padding-left: 30px;
  position: fixed;
  right: 0;
  bottom: 100px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.FloatMsg-collapse {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
.FloatMsg-alarm {
  height: 20px;
  width: auto;
  margin-right: 5px;
}
.FloatMsg-msg {
  width: 90%;
  padding: 8px 20px;
  margin: 50px auto;
  color: #fff;
  border-radius: 99px;
  background-color: #cf4242;
}
.ECAlarm-wrapper {
  background-color: #cf4242;
  border-radius: 10px;
  > ul {
    > li {
      flex: 1;
      font-size: 12px;
      text-align: center;
      > div:first-of-type {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.equAlarm-wrapper {
  background-color: #2f72d6;
  border-radius: 4px;
  > ul {
    > li {
      flex: 1;
      font-size: 12px;
      > div:first-of-type {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.u-bg-blue {
  background-color: #2f72d6;
}
.app-light {
  .FloatMsg-close,
  .FloatMsg-open {
    background-color: rgba(183, 201, 215, 0.6);
  }
}
:deep(.el-carousel__container) {
  width: 100%;
  height: 100%;
}
</style>
